<template>
    <div class="red-access">

      <!--S添加按钮-->
      <Button
        id="add-button"
        type="primary"
        @click="show_add_model = true"
      >
        添加
      </Button>
      <!--E添加按钮-->

      <Tabs value="access-list">
        <TabPane label="红包权限" name="access-list">
          <!--S列表-->
          <template v-if="this.data.length > 0">
            <item
              v-for="(item,index) in data"
              :data="item"
              :key="item.id"
              @click.native="clickItem(index)"
            >
            </item>
          </template>
          <!--E列表-->
          <template v-else>
            <h3 class="empty">暂无内容</h3>
          </template>
        </TabPane>
      </Tabs>

      <!--S添加人员二维码-->
        <Modal
          v-model="show_add_model"
          title="微信扫一扫申请发包权限"
          :footer-hide="true"
          :width="300"
          @on-visible-change="addStatusChange"
        >
          <img style="width: 100%;height:100%;"
               :src="add_qrcode_src" />
        </Modal>
      <!--E添加人员二维码-->
    </div>
</template>

<script>
import Item from './components/item'
let RedAccessList = null
export default {
  name: 'red-access',
  data () {
    return {
      // 添加区域显示状态
      show_add_model: false,
      // 添加二维码地址
      add_qrcode_src: '',
      // 列表
      data: [],
      // 操作下标
      index: 0
    }
  },
  components: {
    Item
  },
  mounted () {
    this.getAddQrcode()
    this.getList()
  },
  destroyed () {
    clearTimeout(RedAccessList)
  },
  methods: {
    /**
     * 获取二维码
     */
    getAddQrcode () {
      this.$get('RedAccess/getAddQrcode')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.add_qrcode_src = data + '?time=' + new Date().getTime()
          }
        })
    },
    /**
     * 获取列表
     */
    getList () {
      return this.$get('RedAccess/getList')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.data = data
          } else {
            this.data = []
          }
        })
    },
    /**
     * 添加二维码显示状态
     */
    addStatusChange (res) {
      clearInterval(RedAccessList)
      if (res) {
        RedAccessList = setInterval(() => {
          this.getList()
        }, 500)
      }
    },
    /**
     * 点击列表项目
     */
    clickItem (index) {
      this.index = index
      this.$Modal.info({
        title: '操作',
        width: 300,
        okText: '关闭',
        render: (h) => {
          return h('ButtonGroup', [
            h('Button', {
              props: {
                size: 'large',
                disabled: this.data[this.index].status === '2'
              },
              style: {
                width: '130px',
                float: 'left'
              },
              on: {
                click: () => {
                  this.changeStatus(2)
                }
              }
            }, '通过'),
            h('Button', {
              props: {
                size: 'large'
              },
              style: {
                width: '130px',
                float: 'left'
              },
              on: {
                click: () => {
                  this.changeStatus(9)
                }
              }
            }, '删除')
          ])
        }
      })
    },
    changeStatus (status) {
      let uid = this.data[this.index].uid
      this.$post('redAccess/changeStatus', {
        uid,
        status
      })
        .then((res) => {
          if (res.data.code === 0) {
            this.getList()
            this.$Modal.remove()
          } else {
            this.$Message.error({
              content: '操作失败'
            })
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
  .red-access{
    position: relative;
    background: #fff;
    padding:10px;
    box-sizing: border-box;
    .empty{
      text-align: center;
    }
    #add-button{
      position: absolute;
      z-index: 10;
      top:10px;
      right: 10px;
      cursor: pointer;
    }
  }
</style>
